<template>
    <div>
        <p style="margin: 0">
            {{ no }}、{{ question.questionName }}({{ question.questionScore }})
        </p>
        <el-checkbox-group v-model="multipleanser" :change="handleChange()" :max="4">
            <div class="multiple">
                <el-checkbox label="A">{{ question.questionOptionIds[0] }}</el-checkbox>
            </div>
            <div class="multiple">
                <el-checkbox label="B">{{ question.questionOptionIds[1] }}</el-checkbox>
            </div>
            <div class="multiple">
                <el-checkbox label="C">{{ question.questionOptionIds[2] }}</el-checkbox>
            </div>
            <div class="multiple">
                <el-checkbox label="D">{{ question.questionOptionIds[3] }}</el-checkbox>
            </div>
        </el-checkbox-group>
    </div>
</template>

<script>
export default {
    props: ['question', 'no'],
    data() {
        return {
            multipleanser: []
        }
    },
    methods: {
        handleChange() {
            const child = {
                no: this.$props.no,
                questionId: this.$props.question?.questionId,
                answer: this.multipleanser
            }
            this.$emit('childEvent', child)
        }
    }
}
</script>